<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>定时器bootstrap</title>
    <!-- Bootstrap -->
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<span>
   <select name="id" id="sel" onchange="change()">
    <option value ="id">---请选择---</option>
    @forelse ($first as $f)
           <option value ="{{$f->id}}">--{{$f->district_name}}--</option>
           @endforeach
    </select>
</span>

<span id="twoSel"></span>

</body>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="/bootstrap/js/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script>
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    function change(){
        var option = $("#sel option:selected");
        var pid = option.val();
        $.post("/index/front/postTwoSelect",{pid:pid},function(data){
            var html ='',option ='';
            for (var i=0;i<data.length;i++){
                console.log(data[i].district_name);
                option+='<option value="'+data[i].id+'">'+data[i].district_name+'</option>';
            }
            html+='<select name="two">'+option+'</select>';
            $("#twoSel").html(html);
        });
    }
</script>
</html>